<template>
	<view class="content mainpadding">
		<view class="mainpadding ffffff border flexbetween margin_bottom3">
			<view class="color_ling text_x white_nowrap margin_right3">真實姓名</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入真實姓名" placeholder-style="color: #999999;"
				v-model="name">
		</view>
		<view class="mainpadding ffffff border flexbetween margin_bottom3">
			<view class="color_ling text_x white_nowrap margin_right3">身份證號</view>
			<input class="text_a textright flex1" type="text" placeholder="請輸入身份證號" placeholder-style="color: #999999;"
				v-model="nom">
		</view>
		<view class="mainpadding ffffff border flexbetween margin_bottom3">
			<view class="color_ling text_x white_nowrap margin_right3">發證日期</view>
			<view class="flexleft" @click="show=true">
				<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇日期"
					placeholder-style="color: #999999;" disabled v-model="workrange">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding ffffff border flexbetween margin_bottom3">
			<view class="color_ling text_x white_nowrap margin_right3">發證類型</view>
			<view class="flexleft" @click="showType=true">
				<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇發證類型"
					placeholder-style="color: #999999;" disabled v-model="type">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="mainpadding ffffff border flexbetween margin_bottom3">
			<view class="color_ling text_x white_nowrap margin_right3">發證地址</view>
			<!-- <view class="flexleft">
				<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="請選擇地址" popup-title="請選擇地區"
					v-model="area">
					<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇地址"
						placeholder-style="color: #999999;" disabled v-if="!area.length" v-model="addre">
					<text class="inputs1" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
				</uni-data-picker>
				<view class="right_icon margin_left1"></view>
			</view> -->
			<view class="flexleft" @click="showdz=true">
				<input class="text_a textright flex1 margin_right1" type="text" placeholder="請選擇發證地址"
					placeholder-style="color: #999999;" disabled v-model="typedz">
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>
		<view class="flexbetween margin_top">
			<!-- 身份證正面 -->
			<view class="cardImg">
				<image :src="item" mode="" v-for="(item,index) in z_images_arr" :key="index"></image>
				<image src="/static/images/mine/card_front.png" mode="" @click="uploadImg(z_images,z_images_arr,1)"
					v-if="z_images_arr.length<1"></image>
				<view class="deletimg" @click="deleimage(index,z_images_arr,0)" v-if="z_images_arr.length"></view>
			</view>
			<!-- 身份證反面 -->
			<view class="cardImg">
				<image :src="item" mode="" v-for="(item,index) in f_images_arr" :key="index"></image>
				<image src="/static/images/mine/card_reverse.png" mode="" @click="uploadImg(f_images,f_images_arr,1)"
					v-if="f_images_arr.length<1"></image>
				<view class="deletimg" @click="deleimage(index,f_images_arr,1)" v-if="f_images_arr.length"></view>
			</view>
		</view>
		<view class="footer">
			<view class="footerButton" @click="submit">
				提交審核
			</view>
		</view>
		<!-- 選擇發證日期 -->
		<u-datetime-picker cancelText="取消" confirmText="確認"  :show="show" :minDate="minDate" :maxDate="maxDate" v-model="value1" mode="date"
			confirmColor="#FFB800" @cancel="show=false" @confirm="confirmTime"></u-datetime-picker>
		<!-- 選擇發證地址 -->
		<u-picker cancelText="取消" confirmText="確認" :show="showdz" :columns="columnsdz" keyName="name" confirmColor="#FFB800" @cancel="showdz=false"
			@confirm="confirmdz"></u-picker>
		<u-picker cancelText="取消" confirmText="確認" :show="showType" :columns="columns" keyName="name" confirmColor="#FFB800" @cancel="showType=false"
			@confirm="confirmType"></u-picker>
	</view>
</template>

<script>
	import citys from "../static/city/city.js"
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				minDate: 31507200000, //可选的不可超過小時間(1971-01-01)
				maxDate: Number(new Date()), //可选的不可超過大時間
				name: "", //真實姓名
				nom: "", //身份證號
				workrange: "", //發證日期
				showType: false,
				columns: [], //發證類型列表
				type: "", //發證類型
				showdz: false,
				columnsdz: [], //發證類型列表
				typedz: "", //發證類型
				idfz: "",
				items: citys.data, //省市區
				area: "", //選擇的省市區
				addre: "", //發證地址
				z_images: [], //身份證正面傳给後端
				z_images_arr: [], //身份證正面展示
				f_images: [], //身份證反面傳给後端
				f_images_arr: [], //身份證反面展示
			}
		},
		onLoad() {
			this.getTypeList()
			this.getdzList()
		},
		methods: {
			async getTypeList() { //發證類型
				let res = await this.http.request('/api/member/listZs', 'POST', {})
				if (res.code == 1) {
					this.columns.push(res.data)
				}
			},
			async getdzList() { //發證地址
				let res = await this.http.request('/api/index/fzaddressIndex', 'POST', {})
				if (res.code == 1) {
					this.columnsdz.push(res.data)
				}
			},
			confirmTime(e) { //確認發證日期
				this.show = false
				this.workrange = this.secondDate(e.value, 1, 1)
			},
			confirmType(e) { //確認發證類型
				this.showType = false
				this.type = e.value[0].name
			},
			confirmdz(e) { //確認發證類型
				this.showdz = false
				this.typedz = e.value[0].name
				this.idfz = e.value[0].id
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.addre = `${this.area[0]}/${this.area[1]}/${this.area[2]}`
				// this.address.province = area[0].value;
				// this.address.city = area[1].value;
				// this.address.county = area[2].value;
			},
			deleimage(i, upimg, type) { //刪除圖片
				upimg.splice(i, 1)
				if (type == 0) {
					this.z_images.splice(i, 1)
				} else {
					this.f_images.splice(i, 1)
				}
			},
			async submit() {
				let _this = this
				if (!this.name) {
					this.http.toast("請輸入真實姓名！")
					return false
				}
				if (!this.nom) {
					this.http.toast("請輸入身份證號！")
					return false
				}
				if (!this.workrange) {
					this.http.toast("請選擇發證日期！")
					return false
				}
				if (!this.type) {
					this.http.toast("請選擇發證類型！")
					return false
				}
				if (!this.idfz) {
					this.http.toast("請選擇發證地址！")
					return false
				}
				let res = await this.http.request('/api/member/addIden', 'POST', {
					name: _this.name, //真實姓名
					nom: _this.nom, //身份證號
					workrange: _this.workrange, //發證日期
					type: _this.type, //發證類型
					// addre: _this.addre, //發證地址
					z_image: _this.z_images.join(), //身份證正面
					f_image: _this.f_images.join(), //身份證反面
					fzaddress_id: this.idfz
				})
				if (res.code == 1) {
					this.http.toast("提交成功")
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cardImg {
		width: 336rpx;
		height: 291rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}
</style>